<template>
  <div class="main_box" style="padding:10px;">
    <div class="detail_wrap">
      <div class="tit">
        <h2>基础信息</h2>
        <el-button type="success" plain size="small" icon="fa fa-mail-forward" @click="returnList">返回</el-button>
      </div>
      <div class="con">
        <ul>
          <li>
            <label class="label">用户名：</label>
            <span>{{detailData.userName}}</span>
          </li>
          <li>
            <label class="label">用户昵称：</label>
            <span>{{detailData.nickName}}</span>
          </li>
          <li>
            <label class="label">手机号：</label>
            <span>{{detailData.phone}}</span>
          </li>
          <li>
            <label class="label">真实姓名：</label>
            <span>{{detailData.fullName}}</span>
          </li>
          <li>
            <label class="label">性别：</label>
            <span v-if="detailData.sex == 1">男</span>
            <span v-if="detailData.sex == 2">女</span>
          </li>
          <li>
            <label class="label">用户角色：</label>
            <span>{{formatUserRole(detailData.userRole)}}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import AuthApi from "@/api/system/auth";
export default{
    data(){
        return {
          detailData: [],
        }
    },
    mounted(){
      this.init();
    },
    methods:{
      init(){
        this.getData();
      },
      getData(){
        AuthApi.getUserInfo({userId:this.$route.query.id})
        .then(res => {
          this.detailData = res.data;
        })
      },
      /**
       * 过滤器
       */
      formatUserRole(cellValue){
        if(cellValue === 1){
          return "管理员";
        }else if(cellValue==2){
          return "用户"
        }else if(cellValue === 3){
          return "商户"
        }else if(cellValue==4){
          return "服务员"
        }else if(cellValue==5){
          return "业务员"
        }
      },
      returnList(){
        this.$store.dispatch('delView', this.$route);
        this.$router.push({path: "/sys/userManagement"})
      }
    },
}
</script>
<style lang="scss" scoped>
@import "@/assets/css/views/Detail.scss";
</style>
